<template>
  <div class="popup-container">
    <div class="title">请选择院校类型 <span>（多选）</span></div>
    <div class="popup-schoolType">
      <div class="feature-box">
        <div
          :class="{
            'province-item': true,
            active: item.checked,
          }"
          v-for="(item, index) in schoolTypeList"
          :key="index"
          @click="chooseSchoolType(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="bottom-btn">
        <div
          :class="[
            'left-btn',
            chosenSchoolTypeList.length > 0 &&
            chosenSchoolTypeList[0].name !== '不限'
              ? 'active'
              : '',
          ]"
          @click="clear"
        >
          清除已选类型
        </div>
        <div class="right-btn" @click="confirm">确 定</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import schoolTypeData from "@/utils/schoolTypeData";

const emit = defineEmits(["confirmCollegeType"]);

const props = defineProps({
  width: {
    type: String,
    default: "100%",
  },
});
const schoolTypeList = ref([]);
const getSchoolTypeData = () => {
  schoolTypeList.value = schoolTypeData.map((item) => ({
    ...item,
    checked: item.name === "不限",
  }));
};
getSchoolTypeData();

// 清除已选类型
const clear = () => {
  schoolTypeList.value.forEach((item) => {
    item.checked = item.name === "不限";
  });
  chosenSchoolTypeList = [];
};

// 确定已选类型
const confirm = () => {
  emit(
    "confirmCollegeType",
    chosenSchoolTypeList.length > 0
      ? chosenSchoolTypeList
      : [schoolTypeList.value[0]]
  );
};

// 处理院校类型
let chosenSchoolTypeList = [];
const chooseSchoolType = (item) => {
  item.checked = !item.checked;
  // 点击了不限
  if (!item.code) {
    schoolTypeList.value.forEach((item) => {
      item.checked = false;
    });
    item.checked = true;
  } else {
    // 点击了其他类型,重置不限
    schoolTypeList.value[0].checked = false;
  }
  chosenSchoolTypeList = schoolTypeList.value.filter((item) => item.checked);
};
</script>

<style scoped lang="scss">
.popup-container {
  width: 900px;
  .title {
    padding: 32px 0 24px 32px;
    display: flex;
    align-items: flex-end;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 34px;
    color: #222222;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    span {
      font-size: 22px;
      color: #999999;
    }
  }
  .popup-schoolType {
    .feature-box {
      box-sizing: border-box;
      padding: 24px 32px 170px 32px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      overflow-y: auto;
    }
    .province-item {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-family: "PingFang-SC, PingFang-SC";
      font-size: 28px;
      padding: 11px 20px;
      color: #333333;
      background: #f8f8f8;
      border: #ffffff 1px solid;
      &.active {
        color: #0b6eff;
        border: #0b6eff 1px solid;
      }
    }
    .bottom-btn {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 30px;
      background: #ffffff;
      box-shadow: 0px -2px 4px 0px rgba(188, 188, 188, 0.5);
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 24px;
      z-index: 2;

      .left-btn,
      .right-btn {
        flex-shrink: 0;
        width: 48%;
        height: 72px;
        background: #f8f8f8;
        border-radius: 6px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 28px;
        color: #999999;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }

      .left-btn {
        background: #f8f8f8;
        border: 1px solid #f8f8f8;
        &.active {
          border: 1px solid #0b6eff;
          color: #0b6eff;
        }
      }
      .right-btn {
        color: #ffffff;
        background: #0b6eff;
        .confirm {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
